<template>
  <div class="map-viewer" ref="viewerContainer"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { useIndex } from ".";

const props = defineProps<{
  options?: any;
}>();

const { viewerContainer, initViewer, destroyViewer } = useIndex();

onMounted(() => {
  if (viewerContainer.value) {
    initViewer(viewerContainer.value, props.options);
  }
});

onUnmounted(() => {
  destroyViewer();
});
</script>

<style scoped>
.map-viewer {
  width: 100%;
  height: 100%;
}
</style>
